<template>
  <div style="height: 400px;position: relative;">
    <div id="moduleName" class="box"></div>
    <!--<div class="xLabel">-->
      <!--<div class="xText">-->
        <!--<div v-for="(item,index) in xAxisData" :key="index">{{item}}</div>-->
      <!--</div>-->
      <!--<div class="TText">-->
        <!--<div v-for="(item,index) in titleText" :key="index">{{item}}</div>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>
<script>
export default {
  name: 'ColumnChart',
  props: {
    // 图表名称
    moduleName: {
      type: String
    },
    // 底部标题离左面位置
    location: {
      type: Array
    },
    // 底部标题大小
    titleSize: {
      type: Number,
      default: 16
    }
  },
  data () {
    return {
      // 柱状图x轴数据
      xAxisData: ['风电', '光伏', '风电', '光伏', '风电', '光伏'],
      // 柱状图x轴数据标题
      titleText: ['年有效期合格率', '工具种类合格率', '工具种类合格率']
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('moduleName'))
      // 绘制图表
      myChart.setOption({
        title: [
          {
            subtextStyle: {
              fontSize: 16
            },
            top: '90%'
          },
          {
            subtextStyle: {
              fontSize: 16
            },
            top: '90%',
          },
          {
            subtextStyle: {
              fontSize: 16
            },
            top: '90%',
            right: 'center'
          },
          {
            subtext: '单位：个',
            subtextStyle: {
              fontSize: 14
            },
            top: '2.5%',
            left: '3%'
          }
        ],
        legend: {
          top: '5%',
          left: '33%',
          show: true
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData,
          axisTick: {
            // length: 50, // 刻度条长度
            // interval: 1 // 刻度条间隔
            show: false
          },
          axisPointer: {
            label: {
              show: true,
              width: 100
            },
            formatter: function (params) {
              console.log('params',params)
            }
          },
          axisLabel:{
            interval: 0,
            show: true,
            //函数模板
            formatter:function (value,index) {
              console.log(value,index)
              return '{value|'+value+' }';
            },
            rich: {
              value: {
                fontSize: 12,
                backgroundColor: '#eff4fb',
                borderRadius: 10,
                width: 100,
                padding: [10,30,10,30]
              }
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '<70%',
            data: [5, 15, 12, 8, 5, 6],
            type: 'bar',
            barGap: 0.2,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#fccb05'
                }, {
                  offset: 1,
                  color: '#f5804d'
                }]),
                // barBorderRadius: 6,
              },
            },
          },
          {
            name: '70%-80%',
            data: [6, 9, 8, 7, 7, 6],
            type: 'bar',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#29acff'
                }, {
                  offset: 1,
                  color: '#4bdfff'
                }]),
                // barBorderRadius: 6,
              },
            },
          },
          {
            name: '80%-90%',
            data: [26, 43, 13, 40, 15, 11],
            type: 'bar',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#248ff7'
                }, {
                  offset: 1,
                  color: '#6851f1'
                }]),
                // barBorderRadius: 6,
              },
            },
          },
          {
            name: '>90%',
            data: [8, 17, 27, 17, 13, 9],
            type: 'bar',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#8bd46e'
                }, {
                  offset: 1,
                  color: '#09bcb7'
                }]),
                // barBorderRadius: 6,
              },
            },
          }
        ]
      })

      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }

  }
}
</script>
<style scoped lang="less">
.box {
  height: 100%;
  width: 100%;
  position: absolute;
}
  .xLabel{
    width: calc(100% - 110px);
    margin: 0 55px;
    position: absolute;
    bottom: -28px;
    &>div{
      width: 100%;
      display: flex;
      box-sizing: border-box;
      div{
        flex-grow: 1;
        text-align: center;
        background-color: #ccc;

      }
    }
    .xText {
      div:nth-child(odd) {
        border-radius: 10px 0 0 0;
        padding: 10px 0;
        position:relative;
        margin-left: 5px;
        /*border-right: 1px solid #fff*/
        &::after{
          content: '';
          position: absolute;
          bottom: 10px;
          /*left: 0;*/
          right: 0;
          height: 50%;
          border-right: 1px solid #fff;
          border-top-width: 0;
        }
      }
      div:nth-child(even) {
        border-radius: 0 10px 0 0 ;
        padding: 10px 0;
        margin-right: 5px;
      }
    }
    .TText{

      div{
        border-radius: 0 0 10px 10px;
        padding: 10px 0;
        position: relative;
        margin: 0 5px;
        &::after{
          content: '';
          position: absolute;
          top: 0;
          left: 10%;
          width: 80%;
          border-top: 1px solid #fff;
        }
      }
    }
  }

</style>
<style>
  .highcharts-point{
    rx: 0;
    ry: 0
  }
</style>
